<template>
  <div id="dish-taste">
    <Search :nowView='whichView' @searchWhat='search'></Search>
    <div class="table-box">
      <el-container>
        <el-header class="table-title" height="40px">
          <el-row>
            <el-col :span="18">优惠券列表列表</el-col>
            <el-col :span="6">
              <el-button
                class="btn-size"
                type="primary"
                icon="el-icon-circle-plus-outline"
                @click="dialogFormVisible_add = true"
                >新增</el-button
              >
              <el-button class="btn-size" type="danger" icon="el-icon-delete" @click="batchDelete()"
                >批量删除</el-button
              >
            </el-col>
          </el-row>
        </el-header>
        <el-main class="table-content">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection"> </el-table-column>
            <el-table-column label="序号" width="50" align="center">
              <template slot-scope="scope">{{(nowPage-1)*pageCount+scope.$index+1}}</template>
            </el-table-column>
            <el-table-column label="类型名称" align="center">
              <template slot-scope="scope">
                {{ scope.row.typeName }}
              </template>
            </el-table-column>
            <el-table-column prop="describes" label="说明" align="center">
            </el-table-column>
            <el-table-column
              prop="state"
              label="状态"
              align="center"
            ></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="
                    handleEdit(scope.$index, scope.row);
                    dialogFormVisible_edit = true;
                  "
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 新增 -->
          <el-dialog
            title="Banner设置"
            :visible.sync="dialogFormVisible_add"
            width="500px"
          >
            <el-form :model="addForm" :rules="rules" ref='addForm'>
              <el-form-item label="类型" prop='typeName'>
                <el-input
                  v-model="addForm.typeName"
                  autocomplete="off"
                  style="width: 180px"
                ></el-input>
              </el-form-item>
              <el-form-item label="说明" prop="describes">
                <el-input
                  type="textarea"
                  v-model="addForm.describes"
                  autocomplete="off"
                  style="width: 180px"
                ></el-input>
              </el-form-item>
              <el-form-item label="状态" prop='state'>
                <el-select v-model="addForm.state" placeholder="请选择状态">
                  <el-option label="显示" value="1"></el-option>
                  <el-option label="隐藏" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible_add = false"
                >取 消</el-button
              >
              <el-button
                type="primary"
                @click="
                   submitForm('addForm')
                "
                >确 定</el-button
              >
            </div>
          </el-dialog>
          <!-- 编辑 -->
          <el-dialog
            title="修改"
            :visible.sync="dialogFormVisible_edit"
            width="500px"
          >
            <el-form :model="editForm">
              <el-form-item label="类型">
                <el-input
                  v-model="editForm.typeName"
                  autocomplete="off"
                  style="width: 180px"
                ></el-input>
              </el-form-item>
              <el-form-item label="说明">
                <el-input
                  type="textarea"
                  v-model="editForm.describes"
                  autocomplete="off"
                  style="width: 180px"
                ></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="editForm.state" placeholder="请选择状态">
                  <el-option label="显示" value="1"></el-option>
                  <el-option label="隐藏" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible_edit = false"
                >取 消</el-button
              >
              <el-button
                type="primary"
                @click="
                  dialogFormVisible_edit = false;
                  editCouponType();
                "
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </el-main>
        <Pagination @shareData="shareData" :totalCount="count" ref='toNumOne'></Pagination>
      </el-container>
    </div>
  </div>
</template>

<script>
import Pagination from "../../components/common/Pagination.vue";
import Search from "../../components/tang/search.vue";
export default {
  components: {
    Search,
    Pagination,
  },
  data() {
    return {
      rules:{
        typeName:[
          { required: true, message: '请输入优惠券类型', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
        ],
        describes:[
            { required: true, message: '请填写说明', trigger: 'blur' }
        ],
        state:[
           { required: true, message: '请选择状态', trigger: 'change' }
        ]
      },
      whichView:'请输入优惠券名称',
      searchInfo:'',
      multipleSelection: [],
      dialogFormVisible_add: false,
      dialogFormVisible_edit: false,
      tableData: [],
      // 新增表单
      addForm: {
        typeName: "",
        describes: "",
        state: "",
        id: "",
      },
      // 编辑表单
      editForm: {
        typeName: "",
        describes: "",
        state: "",
        id: "",
      },
      pageCount: 5,
      nowPage: 1,
      count: 0,
    };
  },
  methods: {
    // 搜索
    search(obj){
      console.log(obj);
      this.searchInfo=obj;
      console.log(this.searchInfo)
      this.nowPage=1
      this.$refs.toNumOne.toOne()
      this.getInfo()
    },
    // 分页
    shareData(v) {
      console.log(v);
      this.pageCount = v.pageCount;
      this.nowPage = v.nowPage;
      // console.log(this.pageCount)
      this.getInfo();
    },
    // 增删改查
    handleEdit(index, row) {
      console.log(index, row);
      this.editForm.typeName = row.typeName,
      this.editForm.describes = row.describes,
      this.editForm.state = row.state;
      this.editForm.id = row.id;
      console.log(this.editForm)
    },
    handleDelete(index, row) {
      console.log(index, row);
      // row.splice(index, 1);
      this.axios({
        method: "get",
        url: "/CouponType/delete/"+row.id,
      }).then((res)=>{
        console.log(res)
        this.getInfo()
      })
    },
    batchDelete(){
      this.axios({
        method:'post',
        url:'/CouponType/deleteByIds',
        data:this.multipleSelection
      }).then((res)=>{
        console.log(res)
        this.getInfo()
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection=[]
      for(let i=0;i<val.length;i++){
        this.multipleSelection.push(val[i].id)
      }
      this.multipleSelection={
        ids:this.multipleSelection
      }
      console.log(this.multipleSelection)
    },
    // 获取所有信息接口
    getInfo() {
      this.axios({
        method: "post",
        url: "/CouponType/list",
        data: {
          page: this.nowPage,
          pageSize: this.pageCount,
          typeName: this.searchInfo,
        },
      }).then((res) => {
        // console.log(res)
        // console.log('>>>>>>>',this.nowPage)
        this.count = res.data.count;
        this.tableData = [];
        for (let i = 0; i < res.data.data.length; i++) {
          // res.data.data[i].sort=i+1
          this.tableData.push(res.data.data[i]);
          if (this.tableData[i].state == 0) {
            this.tableData[i].state = "隐藏";
          } else {
            this.tableData[i].state = "显示";
          }
        }
        console.log(this.tableData)
      });
    },
    //表单验证
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.addCouponType()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    // 增加接口
    addCouponType() {
      console.log(this.addForm);
      this.axios({
        method: "post",
        url: "/CouponType/add",
        data: this.addForm,
      }).then((res) => {
        console.log(res);
        // 成功后清楚所有数据
        if (res.data.code == 200) {
          (this.addForm.typeName = ""),
            (this.addForm.describes = ""),
            (this.addForm.state = ""),
            (this.addForm.id = 0);
            this.dialogFormVisible_add = false;
            this.getInfo()
        }
      });
    },
    // 修改优惠券接口
    editCouponType() {
      if (this.editForm.state == "隐藏") {
        this.editForm.state = 0;
      } else {
        this.editForm.state = 1;
      }
      console.log(1,this.editForm);
      this.axios({
        method: "post",
        url: "/CouponType/update",
        data: this.editForm,
      }).then((res) => {
        console.log(res);
        this.getInfo()
      });
    },
  },
  // 创建页面时获取数据
  created() {
    this.getInfo();
    // console.log(this.tableData)
  },
};
</script>

<style lang='less' scoped>
.table-title {
  margin: 1rem;
  background-color: #f5f9fc;
  box-sizing: border-box;
  height: 4rem;
  line-height: 40px;
  padding-left: 10px;
  padding-right: 10px;
}
.table-box {
  margin-top: 1.5rem;
  border: 0.1rem solid #dbe0e9;
  background-color: #fff;
}
.btn-size {
  height: 3rem;
  padding: 0.6rem 2rem;
}
.table-content {
  background-color: #f5f9fc;
  box-sizing: border-box;
  margin: 0 1rem 1rem 1rem;
  padding: 1rem;
}
</style>